<template>
  <div class="formatReview">
    <div class="clearfloat">
      <orderStatistics :myInfo ='myInfo'  @getData='getTableData'/>
      <!-- 列表查找 -->
      <div class="search-wrap fr">
        <table-search
          ref="table-search"
          :selectHead="selectHead"
          @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>


    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" min-width="60" align="left">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*pageSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="待审核时长(天)" align="left" prop='wait_format_audit_time' sortable='custom' min-width="150">
        <template slot-scope="scope">
          <span :class='getFormatReviewTime(scope.row) > 3 ? "font_danger" : ""'>{{getFormatReviewTime(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="订单编号" align="left" prop='order_number' sortable='custom' min-width="200"></el-table-column>
      <el-table-column show-overflow-tooltip label="代理人" align="left" prop='agent' sortable='custom' min-width="150">
        <template slot-scope="scope">
          {{ scope.row.agent | agentNumAddName }}
        </template>
      </el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="status" label="流程状态" min-width="120" align="left"></el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="type" label="专利类型" min-width="120" align="left"></el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="liaisons" label="联络人" min-width="120" align="left"></el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="liaisons_tel" label="电话" min-width="130" align="left"></el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="liaisons_email" label="邮箱" min-width="180" align="left"></el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="patent_user" label="专利权人" min-width="180" align="left"></el-table-column>
      <el-table-column sortable='custom' show-overflow-tooltip prop="user_name" label="发明人" min-width="180" align="left"></el-table-column>
      <el-table-column prop="fish_file" label="上报文件" min-width="200" align="left">
				<template slot-scope="scope">
          <div class="flie-hid">
            <a v-for="item in scope.row.fishfileArr" :key="item.id" :href="baseUrl +'/api/download?path=' + item.file +'/'+ item.path"
            :download="item.path" :title="item.path" class="el-icon-tickets file_sh"></a>
          </div>
				</template>
			</el-table-column>
      <el-table-column prop="fish_file" label="内容审核文件" min-width="200" align="left">
				<template slot-scope="scope">
          <div class="flie-hid">
            <a v-for="item in scope.row.reviewfileArr" :key="item.id" :href="baseUrl +'/api/download?path=' + item.file +'/'+ item.path"
            :download="item.path" :title="item.path" class="el-icon-tickets file_sh"></a>
          </div>
				</template>
			</el-table-column>

      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="reviews(scope.row)" type="primary" size="small">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination @paginationChange="paginateChange" :total="total"></pagination>
    <formatReviewDialog ref="formatReviewDialog" @refresh='getTableData'/>
  </div>
</template>

<script>
import orderStatistics from "~/components/orderStatistics"
import { getMyInfo } from "~/api/user"
import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import formatReviewDialog from './dialogPage/formatReview-dialog'
export default {
  data () {
    return {
      baseUrl: global.baseurl,
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      currentPage: 1, //目前在第几页
      total: 0,
      paramsByOrder: {
        status: '文件格式审核中',
        sort_str: "wait_format_audit_time",
        sort_order: "desc"
      },
      myInfo: {
        finish_file_format_audit : 0
      },
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '代理人',
          props: 'agent_id'
        },
        {
          label: '专利类型',
          props: 'type'
        },
        {
          label: '联络人',
          props: 'liaisons'
        },
        {
          label: '电话',
          props: 'liaisons_tel'
        },
        {
          label: '邮箱',
          props: 'liaisons_email'
        },
        {
          label: '专利权人',
          props: 'patent_user'
        },
        {
          label: '发明人',
          props: 'user_name'
        },
      ],
      search_params: {},

    }
  },
  components: {
    Pagination,
    tableSearch,
    orderStatistics,
    formatReviewDialog
  },
  created () {
    this.getTableData()
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
        this.roleID = this.myInfo.role_id
      }
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByOrder, ...this.search_params}
      if (args) {
        params = {...params, ...args}
      }
      this.$axios.get('api/order', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.splitFile(res.data.data)
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.total = res.data.page.total
           // 重绘表格解决错位问题
          this.$nextTick(()=>{
            this.$refs.tableRef.doLayout()
          })
          this.getMyinfo()
        } else {
          this.$message.error('服务器繁忙')
          this.loading = false
        }
      })
    },
    splitFile (data) {
      for(let i = 0; i < data.length; i++) {

        if (data[i].fish_file == null || data[i].fish_file == "") { }
        else {
          data[i].fishfileArr = [];
          let fishfile_Arr = data[i].fish_file.split("&");
          for (let f in fishfile_Arr) {
            let itemobj = {
              id: f + 1,
              path: fishfile_Arr[f],
              file: ''
            };
            let itemArr = itemobj.path.split("/")
            itemobj.path = itemArr[itemArr.length - 1]
            itemobj.file = itemArr.slice(0, 2).join("/");
            data[i].fishfileArr.push(itemobj);
          }
        }

        //审核文件 切割数组
        if (
          data[i].review_file == null ||
          data[i].review_file == ""
        ) { } else {
          data[i].reviewfileArr = [];
          let reviewfile = data[i].review_file.split("&");
          for (let j in reviewfile) {
            let itemobj = {
              id: j + 1,
              path: reviewfile[j],
              file: ''
            };
            let itemArr = itemobj.path.split("/")
            itemobj.path = itemArr[itemArr.length - 1]
            itemobj.file = itemArr.slice(0, 2).join("/");
            data[i].reviewfileArr.push(itemobj);
          }
        }

      }
    },
    searchMethods(params, no_search) {
      // this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByOrder.sort_str = column.prop
        this.paramsByOrder.sort_order = 'asc'
      } else {
        delete this.paramsByOrder.sort_str
        delete this.paramsByOrder.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },
    reviews(data) {
      this.$refs['formatReviewDialog'].show(data)
    },

    // 格式审核表审核时长
  getFormatReviewTime (value) {

    //获取当前的时间戳
    var nowTime = new Date().getTime()
    let createTime = ''
    if (value.statuss) {
      // 自提案件
      let sta = value.statuss
      if (value.is_distribution == 3) {
        if (sta[sta.findIndex(v => v.id == 28)]) {
          createTime = sta[sta.findIndex(v => v.id == 28)].pivot.created_at
        } else {
          createTime = sta[sta.findIndex(v => v.id == 4)].pivot.created_at
        }
      } else { // 普通案件
        if (sta[sta.findIndex(v => v.id == 28)]) {
          createTime = sta[sta.findIndex(v => v.id == 28)].pivot.created_at
        } else {
          createTime = sta[sta.findIndex(v => v.id == 13)].pivot.created_at
        }
      }
    } else {
      return ''
    }

    createTime = createTime.replace(/-/g, "/")
    createTime = new Date(createTime);
    //获取处理时间戳
    let cha = nowTime - createTime;
    function IsNaN(value) {
      return typeof value === 'number' && isNaN(value);
    }
    if (IsNaN(cha)) {
      return ''
    }
    //转换天数
    let round2 = (cha / 1000 / 60 / 60 / 24).toFixed(2)
    let	processingTime = (Math.ceil(round2 * 10) / 10).toFixed(1)
    if (processingTime < 0) {
      return '0.0'
    }  else if (processingTime < 0.1) {
      return '0.1'
    } else {
      return processingTime;
    }
  }

  }
}
</script>

<style lang='less' type='text/css' scoped>
  .formatReview {
    height: 100%; //撑满表格
    .withdraw-header {
      margin-bottom: 20px;
    }
    .el-table {
      width: 99.9% !important;

      .el-table__body {
        .pay-status {
          padding: 0;
          .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            .el-image {
              width: 40px;
              height: 40px;
              margin-left: 10px;
              &:nth-last-child(1) {
                margin-left: 0;
              }
              image {
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
        }
      }
      .file_sh {
        font-size: 25px;
        margin-right: 10px;
      }
    }

  }
</style>
